<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;

            /*     上下左右*/
            /*margin: 100px;*/
            /*      上下   左右*/
            /*margin:  10px  20px;*/
            /*      上   左右   下*/
            /*margin: 10px  20px  30px;*/
            /*      上     右  下     左*/
            /*margin: 10px 20px  30px  40px;*/

            /*margin-top: 50px;*/
            /*margin-right: 40px;*/
            /*margin-left: 30px;*/
            /*margin-bottom: 100px;*/

            /* 如下这个居中, 表示的是, 一个盒子在另外一个盒子中(父子关系)中居中
                  并且, 这个设置居中的盒子(子标签) 必须要具有宽度属性   */
            margin: 200px auto;
        }
    </style>
</head>
<body>

    <hr>
    <div>
        div
    </div>
    <hr>


</body>
</html>
